<template>
  <el-menu
    active-text-color="#409eff"
    background-color="#545c64"
    class="el-menu-vertical-demo"
    default-active="2"
    style="width: 200px"
    text-color="#fff"
    router
  >
    <div class="text">喻你同行</div>

    <el-menu-item index="/home">
      <el-icon><Menu /></el-icon>
      <span>首页</span>
    </el-menu-item>

    <el-menu-item index="/itinerary">
      <el-icon><Operation /></el-icon>
      <span>行程查询</span>
    </el-menu-item>

    

    <el-menu-item
      index="/employee"
      v-if="userStore.getUser() !== null && userStore.getUser().roles === 'ROLE_ADMIN'"
    >
      <el-icon><User /></el-icon>
      <span>员工查询</span>
    </el-menu-item>

    <el-menu-item index="/attractions">
      <el-icon><Guide /></el-icon>
      <span>景点查询</span>
    </el-menu-item>
  </el-menu>
</template>

<script lang="ts" setup>
import { Operation, User, Guide,Menu } from "@element-plus/icons-vue";
import { useUserStore } from "../../../stores/userStore";

const userStore = useUserStore();
</script>

<style scoped lang="scss">
.el-menu-vertical-demo {
  height: 100vh;
}
.text {
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: white;
  font-weight: bold;
}
</style>
